<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="/app/ky_shouyin/component/layui/css/layui.css">
    <script src="/app/ky_shouyin/component/layui/layui.js"></script>
    <style>
        .order-goods { margin: 5px 0; }
        .order-goods span { margin-right: 10px; }
        /* 添加布局样式 */
        .main-content {
            position: absolute;
            left: 80px;  /* 侧边栏宽度 */
            right: 0;
            top: 60px;   /* 顶部菜单高度 */
            bottom: 0;
            padding: 15px;
            overflow: auto;
        }
        /* 适配卡片样式 */
        .layui-card {
            margin-bottom: 15px;
        }
        /* 确保表格在内容区域正确显示 */
        .layui-table-view {
            margin: 10px 0;
        }
    </style>
</head>
<body>
<?php include base_path() . '/plugin/ky_shouyin/app/view/layout/topmenu.html'; ?>
<?php include base_path() . '/plugin/ky_shouyin/app/view/layout/front_leftmenu.html'; ?>

<div class="main-content">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 原有内容保持不变 -->
            <div class="layui-form layui-form-pane" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="dateRange" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">订单状态</label>
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">全部状态</option>
                                <option value="0">待支付</option>
                                <option value="1">已支付</option>
                                <option value="2">已退款</option>
                                <option value="5">已取消</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" placeholder="订单号/会员姓名/手机号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="searchForm">搜索</button>
                        <button class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                    </div>
                </div>
            </div>
            <table id="orderTable" lay-filter="orderTable"></table>
        </div>
    </div>
</div>

    <!-- 表格工具栏模板 -->
    <script type="text/html" id="tableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
        </div>
    </script>
    
    <!-- 订单状态模板 -->
    <script type="text/html" id="statusTpl">
        {{# if(d.status === 0){ }}
            <span class="layui-badge layui-bg-gray">待支付</span>
        {{# }else if(d.status === 1){ }}
            <span class="layui-badge layui-bg-green">已支付</span>
        {{# }else if(d.status === 2){ }}
            <span class="layui-badge layui-bg-orange">已退款</span>
        {{# }else if(d.status === 5){ }}
            <span class="layui-badge layui-bg-gray">已取消</span>
        {{# }else{ }}
            <span class="layui-badge layui-bg-blue">其他状态</span>
        {{# } }}
    </script>
    
    <!-- 支付方式模板 -->
    <script type="text/html" id="payTypeTpl">
        {{#  if(d.pay_type == 1){ }}
            在线支付
        {{#  } else if(d.pay_type == 2){ }}
            现金支付
        {{#  } else if(d.pay_type == 3){ }}
            余额支付
        {{#  } }}
    </script>

    <script type="text/html" id="tableBar">
        {{# if(d.status === 1 && d.is_refunded === 0){ }}
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="refund">退款</button>
        {{# } }}
        <button class="layui-btn layui-btn-xs" lay-event="detail">查看</button>
    </script>

    <script>
    layui.use(['table', 'form', 'laydate', 'layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var $ = layui.jquery;
        
        // 日期范围选择
        laydate.render({
            elem: '#dateRange',
            range: true,
            type: 'date'
        });
        
        // 表格实例
        table.render({
            elem: '#orderTable',
            url: '/app/ky_shouyin/front/order/get-list',
            toolbar: '#tableToolbar',
            defaultToolbar: ['filter', 'exports'],
            cols: [[
                {field: 'order_no', title: '订单号', width: 180},
                {field: 'member_name', title: '会员姓名', width: 100},
                {field: 'member_phone', title: '手机号', width: 120},
                {field: 'total_amount', title: '订单金额', width: 100},
                {field: 'discount_amount', title: '优惠金额', width: 100},
                {field: 'paid_amount', title: '实付金额', width: 100},
                {field: 'pay_type', title: '支付方式', width: 100, templet: '#payTypeTpl'},
                {field: 'status', title: '订单状态', width: 100, templet: '#statusTpl'},
                {field: 'created_at', title: '创建时间', width: 160},
                {fixed: 'right', title: '操作', toolbar: '#tableBar', width: 130}
            ]],
            page: true,
            limit: 20,
            limits: [20, 30, 50, 100],
            skin: 'line'
        });
        
        // 表格工具栏事件
        table.on('toolbar(orderTable)', function(obj){
            if(obj.event === 'refresh'){
                table.reload('orderTable');
            }
        });
        
        // 搜索表单提交
        form.on('submit(searchForm)', function(data){
            var dateRange = $('#dateRange').val();
            var dates = dateRange.split(' - ');
            
            table.reload('orderTable', {
                page: {
                    curr: 1
                },
                where: {
                    keyword: data.field.keyword,
                    status: data.field.status,
                    start_date: dates[0],
                    end_date: dates[1]
                }
            });
            return false;
        });
        
        // 重置按钮点击事件
        $('#resetBtn').click(function(){
            $('#dateRange').val('');
            $('input[name="keyword"]').val('');
            $('select[name="status"]').val('');
            form.render('select'); // 重新渲染表单
            table.reload('orderTable', {
                page: {
                    curr: 1
                },
                where: {
                    keyword: '',
                    start_date: '',
                    end_date: '',
                    status: ''
                }
            });
        });
        
        // 表格行工具事件
        table.on('tool(orderTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.open({
                    type: 2,
                    title: '订单详情',
                    content: '/app/ky_shouyin/front/order/detail?id=' + data.id,
                    area: ['80%', '90%'],
                    maxmin: true
                });
            } else if(obj.event === 'refund') {
                layer.confirm('确定要对此订单进行退款操作吗？', {
                    btn: ['确定', '取消']
                }, function(){
                    $.post('/app/ky_shouyin/front/order/refund', {
                        id: data.id
                    }, function(res){
                        if(res.code === 0){
                            layer.msg('退款成功');
                            table.reload('orderTable');
                        } else {
                            layer.msg(res.msg || '退款失败');
                        }
                    });
                });
            }
        });
    });
    </script>
</body>
</html>